<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单管理</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <script src="../js/vue.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>

    <style>
        .el-header{
            background-color: #545c64;
        }
        .header-img{
            width: 100px;
            margin-top:20px;
        }
    </style>
</head>
<body>
<div id="div">
    <div class="content-header">
        <h1>菜单管理</h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <template>
        <div class="dept-box">
            <el-row>
                <el-col :span="24">
                    <div class="tool-box">
                        <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="openFormToAdd">新增</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table
                    :data="list"
                    row-key="id"
                    default-expand-all
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="名称"
                        width="500">
                </el-table-column>
                <el-table-column
                        label="访问路径"
                        prop="linkUrl">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                plain
                                @click="openFormToUpdate(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="openToDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--新增/修改-->
            <el-dialog :title="dialogTitle" width="600px" :visible.sync="formVisible" @close="closeForm('form')">
                <el-form :model="form" :rules="rules" ref="form">
                    <el-form-item label="名称" prop="name" label-width="50px">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="访问路径" prop="name" label-width="50px">
                        <el-input v-model="form.linkUrl" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="上级" label-width="50px">
                        <el-tree :data="list" :props="{label:'name'}" :expand-on-click-node="false"
                                 ref="tree" node-key="id" highlight-current default-expand-all></el-tree>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="formVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmForm('form')">确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </template>
</div>
<script>
    let vue = new Vue({
        el:"#div",
        data: {
            pagination: {//分页相关属性
                currentPage: 1,
                pageSize:10,
                total:100,
                queryString:null,
            },
            list: [], /* 表示当前页数据 */
            page: 1, /* 表示页号 */
            total: 0, /* 总记录数 */
            backup: {}, /* 修改前保存 form 原始数据, 新增前用来恢复 */
            form: {
                id: '',
                name: '',
                parentMenuId: null,
                //state: 0,
                linkUrl:''
            }, /* 新增和修改表单数据, 必须和后台用来接收数据的 java bean 相对应, 并注意数据类型（日期在前台用字符串） */
            formVisible: false, /* 控制新增和修改表单可见性 */
            dialogTitle: '', /* 控制新增和修改表单标题 */
            rules: {
                /*name: [
                  { required: true, message: '请输入名称', trigger: 'blur' },
                  { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ]*/
            } /* 表单校验规则 */
        },
        mounted () {
            this.findAll()
        }, /* data 初始化操作 */
        methods: {
            findAll () {
                let param = {
                    currentPage:this.pagination.currentPage,
                    pageSize:this.pagination.pageSize,
                    queryString:this.pagination.queryString
                };
                //发送ajax请求，提交分页相关参数
                axios.post("/menu/findPage.do",param).then((res) => {
                    //为VUE对象的模型数据赋值，基于双向数据绑定展示到页面
                    this.list = res.data.rows;//当前页展示的数据集合
                    //this.pagination.total = res.data.total;//总数据量
                });
            },
            delete (id) {
                axios.get(`/menu/delete.do?id=${id}`).then((res) => {
                    this.findAll()
                }).catch((err) => {
                    console.error(err)
                })
            },
            add (formData) {
                axios.post("/menu/add.do", this.form).then((res) => {
                    //alert(formData);
                    this.findAll()
                }).catch((err) => {
                    console.error(err)
                })
            },
            update (formData) {
                axios.post('/menu/update.do', this.form).then((res) => {
                    this.findAll()
                }).catch((err) => {
                    console.error(err)
                })
            },
            openToDelete (index, row) {
                this.$confirm(`确定删除 【${row.name}】 吗?`, '提示', {
                    type: 'warning'
                }).then(() => {
                    this.delete(row.id);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                }).catch(()=>{})
            },
            prepareFormData() {
                let formData = new FormData()
                for(let k in this.form) {
                    if (this.form.hasOwnProperty(k)) {
                        let v = this.form[k]
                        if(v != null) {
                            formData.append(k, v)
                        }
                    }
                }
                return formData
            },
            openFormToAdd () {
                this.dialogTitle = '新增'
                this.formVisible = true
                Object.assign(this.backup, this.form)
                this.$nextTick(() => {
                    this.$refs.tree.setCurrentKey(null)
                })
            },
            openFormToUpdate (index, row) {
                this.dialogTitle = '修改'
                this.formVisible = true
                Object.assign(this.backup, this.form)
                this.form = Object.assign({}, row)
                this.$nextTick(() => {
                    this.$refs.tree.setCurrentKey(row.parentMenuId)
                })
            },
            confirmForm (formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        let id = this.form.id
                        this.form.parentMenuId = this.$refs.tree.getCurrentKey()

                        let formData = this.prepareFormData();
                        if (id) {
                            this.update(formData)
                        } else {
                            this.add(formData);
                        }
                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: id ? '修改成功！' : '新增成功！'
                        })
                    }
                })
            },
            closeForm (formName) {
                this.$refs[formName].clearValidate()
                Object.assign(this.form, this.backup)
            },
        }
    });
</script>

<style>
    .dept-box {
        width: 100%;
    }
    .dept-box .tool-box {
        padding: 10px 10px;
        border-bottom: 1px solid #eee;
    }
    .dept-box.el-pagination {
        margin-top: 20px;
    }
</style>
</body>
</html>
</html>
